<template>
	<view>
	<z-paging ref="paging" v-model="dataList" @query="queryList">
		<template #top>
			<tn-navbar>在场车辆 </tn-navbar>
			<tn-input v-model="inputValue" placeholder="请输入车牌查询" @change="filterData">
        <template #suffix>
          <view class="tn-ml tn-mr" @click="filterData">
            <tn-icon name="search" color=" tn-gray_bg"></tn-icon>
          </view>
        </template>
      </tn-input>
		</template>

		<view class="tn-mt-lg tn-flex tn-flex-column">
			<view v-for="(item, index) in dataList" :key="index" class=" " @click="tnParamById('/pages/main/common/detail', JSON.stringify(item))">
				<view class=" tn-shadow-md tn-radius tn-m-sm   tn-gradient-bg__indigo-single ">
					<view class="tn-flex  tn-flex-column  tn-p-sm">
						<view class="tn-flex tn-align-center justify-between  ">
							<view class="tn-white_text tn-text-lg"><tn-icon name="taxi-fill" color="tn-blue" size="40" />
							 <text class="tn-ml-xs">{{ item.numberPlate }}</text>
							</view>
							<view class=" tn-text-sm"> 
							 <text class="tn-ml-xs tn-grey_text">车类:【{{ item.newCarType }}】</text>
							</view>
						</view> 
						<view class="tn-flex tn-align-center justify-start tn-mt-sm">
							<text class="tn-ml-xs tn-white_text">入:{{ item.newInTime }}&nbsp;&nbsp;</text>
							<text class="tn-ml-xs tn-white_text">出:{{ item.newOutTime }}</text>
						</view>
					</view> 
					 
				</view>
				 
			</view>
		</view>
		<template #loadingMoreNoMore> </template>
	</z-paging></view>
</template>

<script setup lang="ts">
  import {onMounted, type Ref, ref} from "vue";
	import { tnParamById } from "@/utils/tnUtil";
  import {onLoad} from "@dcloudio/uni-app";
  import CfCarParkUtil from "@/cfsheep/api/cfCarPark/park";
  import CfPayUtil from "@/cfsheep/api/pay/pay";
  import { parseTime, timeFn } from "@/cfsheep/util";

	const inputValue = ref("");
	const carParkId = ref(0);
	const numberPlate = ref('');
  const carTypeList = ref([]);
  const paymentAgencyList = ref([]);

	const filterData = (_numberPlate: string) => {
    if(_numberPlate.length >= 4 || _numberPlate===''){
      numberPlate.value = _numberPlate;
      queryList(1, 10);
    }else{
      dataList.value = [];
      paging.value.complete(dataList.value);
    }
	};
	// z-paging 示例
	const paging = ref(null);
	// 数据列表
	const dataList: Ref<CfCarParkUseLog[]>  = ref([]);

  const releaseTypeArr = [
    { value: 0, label: '未放行' },
    { value: 1, label: '自动抬杆' },
    { value: 2, label: '人工抬杆' },
    { value: 3, label: '手机放行' },
    { value: 4, label: '扫码' },
    { value: 5, label: '异常放行' },
  ];

  /**
   * 拉取停车记录
   * @param pageNo
   * @param pageSize
   */
  const queryList = async (pageNo: number, pageSize: number) => {
    let params = {
      page: pageNo,
      size: pageSize,
      carParkId: carParkId.value,
      numberPlate: numberPlate.value,
      payTime: 0
    };
    if(numberPlate.value===''){
      delete params.numberPlate;
    }
    const _dataList = await CfCarParkUtil.getCarParkUseLogListByQuery(params);
    if(_dataList.code == 10002){
      dataList.value = _dataList.data;
      for (const i of _dataList.data) {
        i.newCarType = getCarTypeName(i.carType) || '-';
        i.newInTime = parseTime(i.inTime, null) || '-';
        i.newOutTime = parseTime(i.outTime, null) || '-';
        i.newPayTime = parseTime(i.payTime, null) || '-';
        i.parkingDuration = (i.inTime && i.outTime) ? timeFn(Number(i.inTime), Number(i.outTime)) : '-';
        for(const j of releaseTypeArr){
          // console.log(j);
          if(i.inReleaseType == j.value){
            i.newInReleaseType = j.label;
          }
          if(i.outReleaseType == j.value){
            i.newOutReleaseType = j.label;
          }
        }
        for(const j of paymentAgencyList.value){
          // console.log(j);
          if(i.paymentAgencyShortName == j.paymentAgencyName){
            i.paymentAgencyShortNameTitle = j.name;
            break;
          }
        }
      }
    }else{
      dataList.value = [];
    }
    paging.value.complete(dataList.value);
  };

  /**
   * 拉取车辆类型
   */
  const getCarTypeList = async () => {
    const _carTypeList = await CfCarParkUtil.getCarTypeListByQuery({
      page: 1,
      size: 100
    });
    if(_carTypeList.code == 10002){
      carTypeList.value = _carTypeList.data;

    }else{
      carTypeList.value = [];
    }
  };

  /**
   * 拉取支付方式
   */
  const getPaymentAgencyList = async () => {
    const _paymentAgencyList = await CfPayUtil.getPaymentAgencyListByQuery({
      page: 1,
      size: 200
    })
    if(_paymentAgencyList.code == 10002){
      paymentAgencyList.value = _paymentAgencyList.data;

    }else{
      paymentAgencyList.value = [];
    }
  }

  /**
   * 根据车辆类型key获取名称
   * @param key
   */
  const getCarTypeName = (key: string) => {
    // @ts-ignore
    const findRes: any = carTypeList.value.find((i) => i.flagKey === key);
    return findRes?.name;
  };

	onMounted(() => { });
  onLoad((params) => {
    getCarTypeList();
    getPaymentAgencyList();
    if(params != undefined) {
      carParkId.value = params.id;
    }
  });
</script>

<style lang="scss" scoped>
	.parking-name {
		flex: 1;
		/* 使停车场名称占据剩余空间 */
		
	}


</style>
